<template>
  <div class="live">
    <div class="header">
      <span>直播</span>
    </div>
    <div class="body">
      <div class="nav">
        <div
          v-for="(menu, index) in findmenu"
          :key="index"
          @click="getMenu(menu.id)"
        >
          <span
            :class="{ active: index == current }"
            @click="current = index"
            >{{ menu.name }}</span
          >
        </div>
      </div>
      <div class="container">
        <div class="item" v-for="item in currentpage" :key="item.id">
          <p class="title">
            <span class="type_text">{{ item.type_text }}</span>
            <span class="content" v-html="item.content"></span>
          </p>
          <div class="middle">
            <div
              class="images"
              v-for="(img, index) in item.images"
              :key="index"
            >
              <div class="img">
                <img :src="img" alt="" style="width: 100%" />
              </div>
            </div>
          </div>
          <div class="goods">
            <div
              v-for="good in item.goods"
              :key="good.id"
              class="item"
              @click="$router.push('/detail/' + good.id)"
            >
              <div class="img">
                <img :src="good.image_url" alt="" style="width: 100%" />
              </div>
              <div class="info">
                <div class="des">{{ good.name }}</div>
                <div class="price">￥{{ good.price }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHome } from "@/api/home";
export default {
  name: "live",
  data() {
    return {
      findmenu: [],
      currentpage: {},
      current: 0,
    };
  },
  created() {
    getHome({ device: "h5", method: "find.getfindmenu" }).then(
      (res) => (this.findmenu = res.data.data)
    );
    this.getMenu();
  },
  methods: {
    getMenu(type = "live") {
      getHome({
        page: 1,
        token: "",
        type: type,
        method: "find.getfind",
      }).then((res) => {
        this.currentpage = res.data.data.data;
      });
    },
  },
};
</script>
<style scoped>
.live {
  background: url(@/assets/images/top_bg.png) no-repeat;
  background-size: 100%;
  background-position: 0 0;
  color: #fff;
  background-color: #f1f1f1;
}
.live .nav {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  line-height: 0.92rem;
}
.live .nav > div {
  flex: 1;
}
.live .nav > div span {
  border-bottom: transparent 4px solid;
}

.live .nav > div span.active {
  border-bottom: 4px salmon solid;
}
.header {
  display: flex;
  justify-content: space-between;
  font-size: 0.38rem;
  line-height: 0.92rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.header::before {
  content: "\e6c9";
}
.header::after {
  content: "\e6f7";
}
.body {
  position: absolute;
  top: 0.92rem;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}
.container {
  padding: 0.1rem 0.3rem;
}
.container .item {
  background-color: #fff;
  padding: 0.2rem 0;
  border-radius: 0.2rem;
  margin: 00.2rem 0;
}
.container .title {
  display: flex;
  align-items: flex-start;
  padding: 0.3rem 0.2rem;
}
.container .content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.live .type_text {
  width: 0.8rem;
  font-size: 0.2rem;
  background-color: #fe6600;
  color: #fff;
  text-align: center;
}
.live .title .content {
  font-size: 0.28rem;
  color: #666;
  margin-left: 0.1rem;
}
.container .middle {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.2rem;
}
.container .middle .images {
  width: 33.3%;
}
.container .middle .images .img {
  width: 100%;
  height: 2rem;
  position: relative;
  overflow: hidden;
}
.container .middle .images .img img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.goods {
  display: flex;
  width: 100%;
  overflow: auto;
}
.goods .item {
  display: flex;
  width: 60%;
  padding: 0.3rem 0.4rem;
  position: relative;
}
.goods .item::after {
  content: ">";
  display: block;
  color: #fff;
  background-color: #666;
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  border-radius: 50%;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.2rem;
}
.goods .item .img {
  height: 1rem;
  width: 1rem;
  border-radius: 0.18rem 0 0 0.18rem;
  background-color: #efefef;
  position: relative;
  overflow: hidden;
}
.goods .item .img img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.goods .item .info {
  flex: 1;
  color: #333;
  font-size: 0.28rem;
  margin-left: 0.2rem;
}
.goods .item .info .des {
  width: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.goods .item .info .price {
  color: #fe6600;
}
</style>>
